<template>
  <div class="overview-formula">
    <el-form label-position="right" label-width="80px">
      <el-form-item label="配置公式" style="margin-right: 16px;margin-bottom: 15px;">
        <div style="display: flex;position: relative;">
          <div class="formula-container">
            <draggable
              v-model="formulaList"
              v-bind="dragOptions"
              group="order"
              class="formula-container-draggable"
              handle=".draggable-move">
              <transition-group type="transition" style="display:flex;flex-wrap: wrap;">
                <span
                  v-for="(tag, index) in formulaList"
                  :key="index + tag.name"
                  class="overview-formula-tag draggable-move"
                  @click.stop="deleteFormula(tag,index)" > {{ handleShowName(tag) }} </span>
              </transition-group>
            </draggable>
          </div>
          <tipIcon style=" margin-top: 9px;margin-left: 4px;" content="配置公式的元素可进行拖拽排序" />
        </div>
      </el-form-item>
      <el-form-item label="计算元素" style="margin-right: 16px;margin-bottom: 15px;">
        <div
          v-for="(item, index) in mathTag"
          :key="index"
          class="quote-tag"
          @click="quoteFun(item, 'math')"
        >{{ item.name }}</div>
      </el-form-item>
      <el-form-item :label="quoteLabelName" style="margin-right: 16px;margin-bottom: 15px;">
        <div class="formula-quote">
          <el-select
            v-model="quoteTag"
            :value-key="valueKey"
            :placeholder="quoteLabelPlaceholder"
            class="width240"
            size="small"
            @change="quoteTagFun($event)">
            <el-option
              v-for="(item,index) in tagsOptions"
              :key="index"
              :label="item.name"
              :value="item"/>
          </el-select>
        </div>
      </el-form-item>
      <el-form-item label="数值" style="margin-right: 16px;margin-bottom: 15px;">
        <div class="formula-quote">
          <div class="formula-quote-input">
            <el-input v-model="quoteValue" class="width240" placeholder="请输入数字" size="small" type="number" />
          </div>
          <el-button type="primary" size="small" class="quote-btn" @click="quoteFun({key: quoteValue,name: quoteValue, type: 'number'})">填入</el-button>
        </div>
      </el-form-item>
      <slot />
    </el-form>
  </div>
</template>

<script>
import draggable from 'vuedraggable';
import ElMessage from '@/utils/message';
import tip from '@/assets/tishi.png';
export default {
  components: { draggable },
  model: {
    prop: 'value',
    event: 'changeValue'
  },
  props: {
    value: {
      type: Array,
      default: () => {
        return [];
      }
    },
    currentElement: {
      type: Object,
      default: null
    },
    quoteLabelPlaceholder: {
      type: String,
      default: '请选择引用的标签值'
    },
    quoteLabelName: {
      type: String,
      default: '标签值'
    },
    valueKey: {
      type: String,
      default: 'key'
    },
    tagsOptions: {
      type: Array,
      default: () => {
        return [];
      }
    },
    formOptionsList: {
      type: Array,
      default: () => {
        return [];
      }
    },
    mathTag: {
      type: Array,
      default: () => {
        return [
          { name: '×', key: '*', type: 'math' },
          { name: '÷', key: '/', type: 'math' },
          { name: '+', key: '+', type: 'math' },
          { name: '-', key: '-', type: 'math' },
          { name: '(', key: '(', type: 'math' },
          { name: ')', key: ')', type: 'math' }
        ];
      }
    }
  },
  data() {
    return {
      tip,
      dragOptions: {
        animation: 200,
        disabled: false,
        ghostClass: 'ghost'
      },
      quoteValue: '',
      quoteTag: ''
    };
  },
  computed: {
    formulaList: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit('changeValue', val);
      }
    }
  },
  methods: {
    quoteTagFun(item) {
      if (item) {
        /**
         * 当存在公式C=A+B时，此时配置公式B=A+C需提示“公式C字段已引用当前字段，不可循环引用”
         * 也就是说，引用的字段是公式字段时，如果这个公式字段以及引用了当前字段，则拒绝
         */
        this.quoteTag = '';
        if (this.currentElement && item.type === 'formulaInput' && item.options.formulaOrigin) {
          const isReject = item.options.formulaOrigin.some(i => i.key === this.currentElement.key);
          if (isReject) {
            ElMessage.error(`公式字段${item.name}已引用当前字段，不可循环引用`);
            return;
          }
        }
        this.value.push(item);
        this.$emit('changeValue', this.value);
      }
    },
    quoteFun(item) {
      if (item.type === 'number') {
        this.quoteValue = '';
        if (item.key === undefined || item.key === '') {
          return;
        }
      }
      this.value.push(item);
      this.$emit('changeValue', this.value);
    },
    handleShowName(tag) {
      // if (tag.isSubTable && tag.linkFormKey) {
      //   const sub = this.formOptionsList.find(i => i.key === tag.linkFormKey);
      //   if (sub) return `${sub.name}.${tag.name}`;
      // }
      return tag.name || tag[this.valueKey] || tag.key;
    },
    deleteFormula(item, index) {
      this.value.splice(index, 1);
      this.$emit('changeValue', this.value);
    }
  }
};
</script>

<style lang="scss" scoped>
.overview-formula {
  .overview-formula-tag {
    padding: 0 8px;
    height:24px;
    background:rgba(239,243,251,1);
    border-radius:4px;
    color: #406EFF;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
    cursor: pointer;
    font-size: 12px;
    margin: 4px;
    white-space: nowrap;
  }
  &::v-deep {
    .el-form-item {
      .el-form-item__content {
        display: flex;
        align-items: center;
      }
    }
  }
  .quote-tag {
      width:28px;
      height:28px;
      background:rgba(239,243,251,1);
      border-radius:4px;
      color: #406EFF;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 8px;
      cursor: pointer;
      font-size: 12px;
    }
}
.formula-container {
    min-width: 240px;
    max-width: 100%;
    min-height: 32px;
    border-radius: 4px;
    border: 1px solid #ddd;
    background-color: #fff;
    cursor: pointer;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    overflow: hidden;
    align-items: center;
    &::v-deep {
      .formula-container-draggable {
        display: flex;
        align-items: center;
        width: 100%;
        height: 100%;
      }
    }
}
.tip-icon {
  position: absolute;
  right: -25px;
  width: 14px;
  top: 10px;
}
.formula-quote {
  display: flex;
  align-items: center;
  .quote-btn {
    margin-left: 10px;
  }
}
.width240 {
  width: 240px;
  &::v-deep {
    .el-input__inner {
      width: 240px;
    }
  }
}
</style>
